<template>
   <div>
       <div class="title">单曲</div>
       <button v-for="item in SearchResult" :key="item.id" class="ResultOne flex" @click="getSongDetail(item)">
           <div class="name">{{item.name}}</div>
           <div class="singer">{{item.singer}} - {{item.album}}</div>
       </button>
   </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Music',['SearchResult'])
     },
     methods:{
      ...mapActions('Music',['getSongDetail'])
     }
  }
</script>
<style scoped lang='less'>

.title{
    width: 100%;
    text-align: left;
    font-size: 25px;
    margin-bottom: 10px;
    padding-left: 5px;
    color: white;
}
.ResultOne{
  width: 100%;
  justify-content: flex-start;
  color: white;
  font-size: 14px;
  padding:  10px;
  box-sizing: border-box;
  border-radius: 5px;
  letter-spacing: 0;
  margin-bottom: 10px;
  .name{
    width: 100%;
    color: orange;
    font-size: 20px;
    text-align: left;
    margin-bottom: 2px;
   
  }
  .singer{
    margin-top: 5px;
     text-align: left;
  }
}
.ResultOne:hover{
    background: rgba(0, 0, 0, 0.5);
}
</style>